<!--
 * @Author: yuanlai
 * @Date: 2024-08-16 16:06:49
 * @LastEditors: yuanlai
 * @LastEditTime: 2024-08-16 20:47:32
 * @Description: 组件二次封装
-->
<template>
    <div class="container">
        <h3>组件二次封装</h3>
        <div style="width: 320px;">
            <p>原组件：</p>
            <el-input ref="inputRef1" v-model="input" placeholder="请输入内容" clearable @change="onInputChange">
                <template slot="prepend">Http://</template>
                <template slot="append">.com</template>
            </el-input>
            <p>封装组件：</p>
            <bInput ref="inputRef2" v-model="input" placeholder="请输入内容" clearable @change="onInputChange">
                <template slot="prepend">Http://</template>
                <template slot="append">.com</template>
            </bInput>
        </div>
    </div>
</template>

<script>
import bInput from '@/components/bInput.vue'
export default {
    name: "demo1",
    components: {
        bInput
    },
    data() {
        return {
            input: ""
        }
    },
    mounted(){
        // this.$refs.inputRef1.focus()
        // this.$refs.inputRef2.focus()
    },
    methods: {
        onInputChange(v) {
            console.log(v)
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>